﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Editone</title>

    <link href="Content/metro-bootstrap.min.css" rel="stylesheet" />

    <!-- WinJS references -->
    <link href="winjs/css/ui-dark.css" rel="stylesheet" />
    <script src="winjs/js/base.js"></script>
    <script src="winjs/js/ui.js"></script>

    <!-- Editone references -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/css/editone.css" rel="stylesheet">
    <script src="Scripts/require.js"></script>
    <script src="src/config.js"></script>
    <script src="src/app.js"></script>
</head>
<body> <!-- BEGIN BODY -->

<header id="editor-header">
    <div class="time-display" data-bind="MsGestureChange: smoothCursorScroll, MsGestureTap: showCursorTimeFlyout">
        <time class="time-playback" data-bind="html: playbackTimeString"></time>
        <time class="time-cursor" data-bind="html: cursorTimeString"></time>
    </div>
    <div class="playback-tools">
        <button data-bind="click: playProject, visible: playbackState()!='Playing'">&#9654;</button>
        <button data-bind="click: stopPlayback, visible: playbackState()=='Playing'">&#9724;</button>
        <button data-bind="click: rewindCursor">&#9198;</button>
    </div>
    <div class="selection-tools">
        <section data-bind="visible: focusClip()">
            <h3>Clip:</h3>
            <button data-win-control="WinJS.UI.AppBarCommand"
                    data-win-options="{label: 'Effect', icon: 'outlinestar', section: 'primary', placement:'bottom'}"
                    data-bind="visible: focusClip(), click: showFlyoutApplyEffect"></button>

            <button data-win-control="WinJS.UI.AppBarCommand"
                    data-win-options="{label:'Split', icon:'cut', section:'primary'}"
                    data-bind="visible: focusClip(), click: splitClip"></button>
        </section>
    </div>
</header>

<main id="editor-canvas" class="sizeref" data-bind="thisElem: editorElement">
    <div id="tracks" class="tracks-tab canvas-tab" data-bind="GestureRoot: 1, thisElem: tracksTab">
        <div class="canvas-viewport" data-bind="thisElem: viewportElem"></div>
        <div class="track-canvas sizeref" data-bind="thisElem: canvasElem, CustomScroll: scrollPos, CustomZoom: zoom, Tap: onCanvasTap, DragOver: onDragOver">
            <div class="tracks-wrapper">
                <div class="spreader"></div>
                <!-- ko foreach: project().tracks -->
                <track-visual params="{track: $data, editor: $parent}"></track-visual>
                <!-- /ko -->
                <ctl-cursor params="{zoom: zoom, position: cursor, playbackPosition: project().playbackMsec}"></ctl-cursor>
            </div>
        </div>
        <div class="track-settings-column">
            <div class="transformer" data-bind="style: {transform: settingsTransform()}">
                <!-- ko foreach: project().tracks -->
                <track-settings params="{track: $data, editor: $parent}"></track-settings>
                <!-- /ko -->
            </div>
        </div>
    </div>
    <div class="open-tab canvas-tab hidden" data-bind="thisElem: openProjectTab">
        <open-project-dialog params="{editor: $data}"></open-project-dialog>
    </div>
    <div class="save-tab canvas-tab hidden" data-bind="thisElem: saveProjectTab">
        <save-project-dialog params="{editor: $data}"></save-project-dialog>
    </div>
</main>

<div class="error-flyout" data-win-control="WinJS.UI.Flyout" data-bind="thisElem: errorFlyout">
    <p data-bind="text: errorMessage"></p>
</div>

<div id="flyout-cursor-time" data-win-control="WinJS.UI.Flyout">
    <rename-track-dialog params="{track: focusTrack}"></rename-track-dialog>
</div>

<div id="flyout-rename-track" data-win-control="WinJS.UI.Flyout">
    <rename-track-dialog params="{track: focusTrack}"></rename-track-dialog>
</div>

<div id="flyout-create-track" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand"
            data-win-options="{label: 'Mono'}"
            data-bind="click: addMonoTrack"></button>
    <button data-win-control="WinJS.UI.MenuCommand"
            data-win-options="{label: 'Stereo'}"
            data-bind="click: addStereoTrack"></button>
</div>

    <div id="flyout-apply-effect" data-win-control="WinJS.UI.Menu" data-bind="thisElem: flyoutApplyEffect">
        <button data-win-control="WinJS.UI.MenuCommand"
                data-win-options="{label: 'Fade in'}"
                data-bind="click: clipFadeIn"></button>
        <button data-win-control="WinJS.UI.MenuCommand"
                data-win-options="{label: 'Fade out'}"
                data-bind="click: clipFadeOut"></button>
        <button data-win-control="WinJS.UI.MenuCommand"
                data-win-options="{label: 'Normalize'}"
                data-bind="click: clipNormalize"></button>
    </div>


<footer data-win-control="WinJS.UI.AppBar"
        data-win-options="{ placement: 'top'}"
        data-bind="thisElem: topAppBar">
    <!-- Section: Clip-->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Remove clip', icon: 'remove', section: 'primary'}"
            data-bind="visible: focusClip(), click: deleteClip"></button>
    <!-- /Section: Clip-->

    <!-- Section: Track-->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Create track', icon: 'add', section: 'primary', type: 'flyout', flyout: 'flyout-create-track'}"></button>

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Remove track', icon: 'remove', section: 'primary'}"
            data-bind="visible: focusTrack(), click: deleteTrack"></button>

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Rename track', icon: 'highlight', section: 'secondary', type: 'flyout', flyout: 'flyout-rename-track'}"
            data-bind="visible: focusTrack()"></button>
    <!-- /Section: Track-->

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Mix & export', icon: 'movetofolder'}"
            data-bind="click: exportProject"></button>

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Import track', icon: 'import'}"
            data-bind="click: importTracks"></button>

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Save', icon: 'savelocal'}"
            data-bind="click: showSaveProjectTab"></button>

    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{label: 'Load', icon: 'openlocal'}"
            data-bind="click: showOpenProjectTab"></button>
</footer>

<div class="splashscreen">
    <div class="splashscreen-loader">
        <img class="splashscreen-image" alt="Splash screen image" src="/images/splashscreen.png">
    </div>
</div>

</body> <!-- END BODY -->
</html>